<template>
    <div>
        <van-dropdown-menu>
          <van-dropdown-item :options="option1" title="综合" disabled/>
          <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="priceChange"/>
          <van-dropdown-item v-model="categorVal" :options="filterCategory" title="分类" @change="categoryChange"/>
        </van-dropdown-menu>
        
        <!-- 搜索提示 -->
        <van-empty v-if="goodsList.length === 0" image="search" description="没有搜索到相关商品" />
        <Products v-else :goodsList="goodsList" />
    </div>
</template>

<script>
    import Products from "../Products.vue"
    export default {
      props:["goodsList","filterCategory"],
      components:{Products},
      updated(){
          /*filterCategory为:
          [
            {value: 0, text: "全部", checked: true}, 
            {value: 1005000, text: "居家", checked: false}]
             需求:categoryVal要做成活的。
             categoryVal的值必须为filterCategory 数组中checked属性为true的一项的value值
            */
          // console.log("this.filterCategory为:",this.filterCategory)
          this.filterCategory.map(item=>{
              if(item.checked){
                  this.categorVal = item.value
              }
          })
      },
      data() {
        return {
          categorVal: 0,
          value2: '',
          option2: [
            { text: '价格由高到低', value: 'desc' },
            { text: '价格由低到高', value: 'asc' },
          ],
          option1: [
            { text: '全部', value: 0 },
            { text: '居家', value: 1 },
          ],
        }
      },
      methods:{
          categoryChange(value){
              // console.log(value)
              //发起搜索商品的请求
              this.$emit("categoryChangeSearch",value)
          },
          priceChange(value){
              console.log(value)
              this.$emit("priceChangeSearch",value)
          }
      }
    };
</script>

<style>
</style>
